<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('产品信息列表')" />
	<th:block th:include="include :: list-css" />
	<style type="text/css">
		label.layui-form-label {width: 95px;padding-right: 0px;}
		.layui-form-radio {margin-top:0;}
		.importTable{empty-cells:show;border-collapse:collapse;border-spacing:0;}
		.listext th{background:#eee;color:#3366cc;}
		.listext th,.listext td{border:solid 1px #ddd;text-align:left;padding:10px;font-size:14px;}
		
		#importProgress {z-index:20200202;background-color: #000;opacity: 0.3;display:none;}
		.importProgress {width:300px;z-index:20202222;position: fixed;top: 34%;left: 40%;display:none;}
		.layui-tab{margin: 0;}
		.layui-table-tool{min-height: 40px;}
	</style>
</head>
<body>
<div class="main-content">
	<div class="content-right">
		<div class="search-top">
			<span>查询条件</span>
			<a href="javascript:;" layadmin-event="flexible" class="menuBtn">
				<i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible" style="color: #fff;"></i>
			</a>
		</div>
		<div class="panel layout-expand layui-expand-east">
		    <div class="panel-header">
		        <div class="panel-tool" style="text-align: center; width: 26px;height: 30px;line-height: 30px;">
		            <a href="javascript:;" layadmin-event="flexible" class="menuBtn">
		                <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible" style="color: #fff;"></i>
		            </a>
		        </div>
		    </div>
		    <div class="panel-body panel-title" style="text-align: center; width: 26px;">查<br>询<br>条<br>件</div>
		</div>
       	<form class="layui-form">
			<th:block th:include="listinclude :: searchRight('page')" />
		</form>
   	</div>
    <div class="mid-content">
		<div class="layui-tab" lay-filter="dhtab">
			<ul class="layui-tab-title" th:with="type=${@producttype.queryList()}">
				<li th:each="dict:${type}" th:class="${dictStat.index} eq '0'?'layui-this':''" th:text="${dict.vCpLxName}" th:typeid="${dict.vCpLx}"></li>
			</ul>
			<div class="layui-tab-content" style="border: 1px solid #099;padding: 10px 15px;">
				<table class="layui-hide" id="dhtable" lay-filter="ftable"></table>
			</div>
		</div>
	</div>
</div>
<!-- 表格头部工作栏-->
<script type="text/html" id="toolbar">
	<div class="layui-btn-container">
        <div class="layui-btn layui-btn-normal layui-table-tools" lay-event="addbtn" shiro:hasPermission="business:product:add">
            <p class="dhicon dh-plus" style="color:white;font-size:14px"><span class="fa_span">新增</span></p>
        </div>
		<div class="layui-btn layui-btn-danger layui-table-tools" onclick="remove()" shiro:hasPermission="business:product:delete">
            <p class="dhicon dh-remove" style="color:white;font-size:14px"><span class="fa_span">批量删除</span></p>
        </div>
		<div class="layui-btn layui-table-tools importbtn-bg" lay-event="importBtn" shiro:hasPermission="business:product:import">
			<i class="dhicon dh-upload"></i> 导入
        </div>
		<div class="layui-btn layui-table-tools importbtn-bg" lay-event="exportbtn" shiro:hasPermission="business:product:export">
			<i class="dhicon dh-download"></i> 导出
        </div>
    </div>
</script>
<!-- 表格操作区 -->
<script type="text/html" id="barDh">
    <a class="layui-btn layui-btn-danger layui-btn-xs dhicon dh-remove" onclick="remove('{{d.guid}}')" shiro:hasPermission="business:product:delete">&nbsp;删除</a>  
</script>
<!-- 产品导入区域 -->
<script type="text/template" id="importTpl">
<form enctype="multipart/form-data" class="mt20 mb10">
	<div class="col-xs-offset-1">
		<input type="file" id="file" name="file"/>
		<div class="mt10 pt5">
			 <a onclick="$.tablelist.importTemplate('/business/product/exporttemplate')" class="btn btn-default btn-xs"><i class="dhicon dh-file-excel-o"></i> 下载模板</a>
		</div>
		<font color="red" class="pull-left mt10">
			提示：仅允许导入“xls”或“xlsx”格式文件！
		</font>
	</div>
</form>
</script>
<!-- 导入明细 -->
<script type="text/html" id="iForm">
<form class="layui-form">
	<div style="margin: 5px 10px;width:150px;display:inline-flex;vertical-align: middle;line-height:30px;">
		<div style="width: auto;white-space: nowrap;"><font class="f_red">*</font>税率：</div>
		<div>
			<input type="text" name="fSl" id="fSl" class="layui-input" style="position:absolute;overflow:hidden;z-index:2;width: 65px;" onkeyup="inputSearch()" onblur="refreshSelect()" autocomplete="off">
			<select id="fSl_select" lay-filter="fSl_select" autocomplete="off" class="layui-select" lay-search th:with="map=${@baseinfosimple.getDropdownData('tb_baseinfo_invoice','fvalue','fvalue')}">
				<option></option>
				<option th:each="dict : ${map}" th:text="${dict.vname}" th:value="${dict.vid}"></option>
			</select>
		</div>
	</div>
	<input type="radio" name="fType" value="1" title="含税算未税">
	<input type="radio" name="fType" value="0" title="未税算含税">
</form>
</script>
<div id="iTable" class="display_no">
	<table class="importTable listext" data-resizable-columns-id="demo-table">
	  <tbody id="itbody">
	  </tbody>
	</table>
</div>
<!-- 导入进度条 -->
<div id="importProgress" class="layui-layer-shade">
</div>
<div class="importProgress">
	<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="dhprogress">
	  <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
	</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: businessJS" />
<th:block th:include="include :: searchJS" />
<th:block th:include="listinclude :: list-templeat" />
<script th:inline="javascript">
	/*<![CDATA[*/
	var prefix = ctx + "business/product";
	var gridColumns = [[${gridColumns}]], 
		importFields =[[${importFields}]],
		moduleTable =[[${moduleTable}]];
	/*]]>*/
</script>
<script type="text/javascript">
var element,thStr;
var vCpFl = $(".layui-tab-title .layui-this").attr("typeid");
var fieldWidth = {},		//导入列表字段宽度
	filedRequired = {},		//导入列表必填字段
	hasNull = false;		//导入数据必填字段有空值
$.each(gridColumns.dictionaryForPageFieldList,function(i,v){
	fieldWidth[v.fields] = v.fieldFrontWidth
	if(v.fieldFrontRequired)filedRequired[v.fields] = v.fieldName;
})
$(".layui-tab-content").css("border-color",pellucidityTen)
var $,layer,form,table,wherestr={};
layui.use(['table','form','layer','jquery','element'], function () {
	$ = layui.$, layer = layui.layer, form = layui.form, table = layui.table, element = layui.element;
	serachRender();//查询条件初始渲染集合
	changeDropdown('fSl');//导入窗口——税率下拉可编辑赋事件
	$.tablelist.init({
		elem: '#dhtable'
		,modalName: "产品信息"
		,url: prefix + '/list'
		,where: {'vCpFl':vCpFl}
		,updateUrl: prefix + "/edit?guid={id}"
		,initSort: {field: 'createTime',type: 'asc'}
		,totalRow: gridColumns.totalRow
		,cols: [gridColumns.gridBody
		]
		,toolbar: '#toolbar'
		,defaultToolbar: [{title:'列设置',layEvent: 'fieldSet',icon: 'layui-icon-set'}] //这里在右边显示
		,height:'full-80'
	});
	//监听排序事件 
	table.on('sort(ftable)', function(obj){
		$.tablelist.sort('dhtable',obj);
	});
	//头工具栏事件
 	table.on('toolbar(ftable)', function(obj){
 	    switch(obj.event){
	 		case 'addbtn':
	 			top.layui.index.openTabsPage(prefix+ "/add",'产品信息 - 新增')
	   		break;
	   		case 'exportbtn':
			   getWherestr();
		   		wherestr['vCpFl'] = vCpFl;
		   		$.ajax({
		   		    url: '/business/product/export',
		   		    type: 'GET',
		   		    data: wherestr,
		   		    dataType: 'json',
		   		    beforeSend: function(){
			   			showloadings(true);
		   		    },
		   		    success: function(result){
		   		    	if (result.code == 0) {
					        window.location.href = ctx + "common/download?fileName=" + encodeURIComponent(result.msg) + "&delete=" + true;
					        parent.$('.page-loading').hide();//页面进行了跳转刷新，需要手动关闭页面的加载动画
						} else if (result.code == web_status.WARNING) {
		                   $.modal.alertWarning(result.msg)
		            	} else {
							$.modal.alertError(result.msg);
						}
				   		showloadings(false);
		   		    }
		   		});
	   		break;
	   		
			case 'tableFull'://表格展开
				$('.north .layui-form').hide();
				table.reload('dhtable',{
					defaultToolbar: [{title:'收缩',layEvent:'tableShrink',icon:'layui-icon-screen-restore'}],
					height: $(window).height()-$('.north').height()-60<300?'300':$(window).height()-( $('.north').height()+$('.south').height()+12)
				});
			break;
			case 'tableShrink'://表格收缩
				$('.north .layui-form').show();
				table.reload('dhtable',{
					defaultToolbar: [{title:'展开',layEvent:'tableFull',icon:'layui-icon-screen-full'}],
					height: $(window).height()-$('.north').height()-60<300?'300':$(window).height()-( $('.north').height()+$('.south').height()+12)
				});
			break;
	    	case 'importBtn':
	   			thStr = '<tr><th><div style="width:30px;">序号</div></th>'
	   			$.each(importFields,function(i,val){
	   				thStr += '<th><div style="width:'+fieldWidth[val]+'px;">' + i + '</div></th>';
	   			})
	   			thStr += '</tr>';
	   			layer.open({
            		type: 1,
            		area: ['400px', '230px'],
            		fix: false,
            		offset: '10%',
            		maxmin: true,
            		shade: 0.3,
            		title: '导入产品',
            		content: $('#importTpl').html(),
            		btn: ['<i class="dhicon dh-check"></i> 导入', '<i class="dhicon dh-remove"></i> 取消'],
            		shadeClose: true,
            		zIndex: 1000,
            		btn1: function(index, layero){
            			var file = layero.find('#file');
            			if(!file[0]['value']){
            				layer.msg("请选择文件！");
            				return false;
            			}
            			var imRes = importListExcel(file[0], importFields, 'product');
            		}
            	});
	   			break;
	 	    case 'fieldSet':
 	    		filedSet(moduleTable);
          	break;
 	    };
 	});
   	//监听Tab页切换
 	element.on('tab(dhtab)', function(data){
 		vCpFl = $(this).attr('typeid');
 		getWherestr();//动态获取条件的值
 		wherestr['vCpFl'] = vCpFl;
        table.reload('dhtable', {page: {curr: 1},where:wherestr});
	});
 });
//通过guid彻底删除
function remove(guid){
	if(guid){
		$.operate.remove("该删除无法恢复，请确认？",prefix + "/delete/",{'productInfoItems':JSON.stringify([{'guid':guid}])},function(result){
			if(result.code==0){
		        setTimeout(function(){
		            layer.closeAll();
		            table.reload('dhtable');
		        }, 1000);
		    }
		});
	}else{
		if(table.checkStatus('dhtable').data.length>0){
			$.operate.remove("是否彻底删除该"+table.checkStatus('dhtable').data.length+"条产品？",prefix + "/delete/",{'productInfoItems':JSON.stringify(table.checkStatus('dhtable').data, null, 2)},function(result){
				if(result.code==0){
			        setTimeout(function(){
			            layer.closeAll();
			            table.reload('dhtable');
			        }, 1000);
			    }
			});
		}else{
			layer.msg("无勾选数据！");
		};
	}
}
/*批量请求导入数据
 *tobj：导入数据对象
 *startNum：从第几条开始导入
 *oneImportNum：每次导入条数
 *allImportNum：总数据量
 *times：导入次数
 */
function eachImport(tobj,startNum, oneImportNum, allImportNum, times, timeNum){
	var importObj = [], inum = startNum, importBl='0%';
	for(var i = startNum; i < startNum + oneImportNum; i++){
		if(i >= allImportNum)break;
		inum = i + 1 ;
		tobj[i]['vCpFl'] = vCpFl;
		importObj.push(tobj[i]);
	}
	$.ajaxSettings.async = false;
	$.post("/business/product/importpost", {'productInfoItems':JSON.stringify(importObj, null, 2),'fSl':$('#fSl').val(),'fType':$("[name='fType']:checked").val()}, function(result) {
		importBl = (inum/allImportNum)*100;
		console.log('导入比:'+importBl.toFixed(2)+ '%');
		console.log('数量:'+inum);
		console.log('总次数:'+times);
		console.log('当前次数:'+timeNum);
		importObj = [];
		timeNum += 1;
    },"json");
	setTimeout(function(){
		if(timeNum <= times){
			eachImport(tobj, startNum + oneImportNum, oneImportNum, allImportNum, times, timeNum);	
		}else{
			element.progress('dhprogress', importBl.toFixed(2)+ '%');
			showloadings(false);
			$.post("/business/product/importtoprocuctpost", {'records':allImportNum}, function(res){
				closeProcess(res, 'product');
			},"json")
		}
		element.progress('dhprogress', importBl.toFixed(2)+ '%');
	},500);
}
</script>
</body>
</html>